<template>
  <el-table :data="tableData" style="width: 100%" :cell-style="cellStyle">
    <el-table-column :label="table[0]" prop="outTradeNo"> </el-table-column>
    <el-table-column :label="table[1]" prop="amount"> </el-table-column>
    <el-table-column :label="table[2]" prop="payMethod"> </el-table-column>
    <el-table-column :label="table[3]" class="red" prop="state">
    </el-table-column>
    <el-table-column :label="table[4]" prop="createdTime"> </el-table-column>
    <el-table-column :label="table[5]">
      <template slot-scope="scope">
        <el-button
          @click.native.prevent="deleteRow(scope.$index, tableData)"
          type="text"
          size="small"
        >
          取消
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { reqTable } from "../api/index";
export default {
  name: "Table",

  data() {
    return {
      tableData: [],
      table: [
        "订单编号",
        "支付金额",
        "支付方式",
        "支付状态",
        "创建时间",
        "操作",
      ],
    };
  },

  methods: {
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      //根据测试结果动态调整单元格样式，成功-绿色，失败-红色，不支持-黄色
      let cellStyle;
      console.log(row.state);
      switch (row.state) {
        case "订单支付成功":case"订单生成":
          cellStyle = "color:green";
          break;
        case "订单支付中":
          cellStyle = "color:pink";
          break;
        case "订单已撤销":case"订单已退款":case"订单关闭":
          cellStyle = "color:red";
          break;
        default:
          cellStyle = "";
      }
      if (column.label == "支付状态") return cellStyle;
    },
    async init() {
      let data = await reqTable({
        current: 1,
        size: 20,
      });
      console.log(data.data, data.data.records);
      this.tableData = data.data.records;
      // await this.$store.dispatch("getTable", { current: 1, size: 10 });
      // this.tableData = this.$store.state.table.List;
    },
  },

  created() {
    this.init();
    // setTimeout(() => {
    //   this.$store.dispatch("getTable", { current: 1, size: 10 });
    //   this.tableData = this.$store.state.table.List;
    //   console.log(this.$store.state, "this.$store.state");
    //   debugger;
    // }, 3000);
    // debugger;
  },
};
</script>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>